<div mat-dialog-content>
  <div
    *ngIf="
      trackTableData$ | async as trackTableData;
      then tableTemplate;
      else loadingTemplate
    "
  ></div>

  <ng-container>
    <ng-template #loadingTemplate>
      <mat-spinner></mat-spinner>
    </ng-template>

    <ng-template #tableTemplate let-trackTableData>
      <div class="flex flex-col md:flex-row">
        <div class="flex flex-col self-center flex-grow gap-y-2 md:gap-y-4">
          <div class="flex flex-col md:flex-row gap-x-2">
            {{ album.albumArtist }} — {{ album.name }}
          </div>
        </div>
        <div>
          <img
            [src]="album.albumCoverUrl"
            [title]="album.name"
            alt="Cover of {{ album.name }}"
            class="h-64 w-full object-cover md:h-full md:w-64"
            mat-card-image
          />
        </div>
      </div>

      <!-- Tracks in this album -->
      <app-track-data-table
        [trackTableData]="trackTableData"
      ></app-track-data-table>
    </ng-template>
  </ng-container>
</div>

<div mat-dialog-actions align="end">
  <!--Add all-->
  <button mat-raised-button (click)="onAddDir()" data-cy="add-all-btn">
    <mat-icon> add</mat-icon>
    <span>Add all</span>
  </button>

  <!--Play all-->
  <button mat-raised-button (click)="onPlayDir()">
    <mat-icon> play_arrow</mat-icon>
    <span>Play all</span>
  </button>
  <button mat-stroked-button mat-dialog-close>Close</button>
</div>
